<template>
    <v-card>
        <v-card-row class="green darken-1">
            <v-card-title>
                <span class="white--text">{{article.title}}</span>

                <v-spacer></v-spacer>
            </v-card-title>
            <p style="color:#d8d8d8;font-size:12px;margin-bottom: -35px;" class="text-xs-right">{{article.create_date}}</p>
        </v-card-row>
        <v-card-text class="infomation" v-html="result">

        </v-card-text>
        <v-divider></v-divider>
        <v-card-row>
            <v-btn :to="'/articles/'+keyword.url" router small flat v-for="keyword in article.keywords" :key="keyword.id" class="green--text">{{keyword.value}}</v-btn>
        </v-card-row>
    </v-card>
</template>

<script>

var MarkdownIt = require('markdown-it')
export default {
    data() {
        return {
            article: {
                title: "",
                keywords: [],
                info: ""
            },
            result: ""
        }
    },
    watch: {
        article: function() {
            // Actual default values
            var md = require('markdown-it')({
                html: true,
                linkify: true,
                typographer: true,
                highlight: function(str, lang) {
                    if (lang && hljs.getLanguage(lang)) {
                        try {
                            return hljs.highlight(lang, str).value;
                        } catch (__) { }
                    }

                    return ''; // use external default escaping
                }
            })
            this.result = md.render(this.article.info)

        }
    },
    mounted: function() {
        logger.log('mounted')
        this.getArticle()
    },
    methods: {
        jumpKey(url) {
            this.$router.push('/articles/' + url)
        },
        getArticle: function() {
            var name = this.$route.params["id"]
            logger.log(name)
            if (name != null && name.length > 0) {
                var vm = this
                var url = '/api/article/' + name
                var param = {
                    method: "GET",
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    mode: 'cors'
                }
                fetch(url, param).then(function(response) {
                    return response.json()
                }).then(function(json) {
                    logger.log(json)
                    if (json != null && json.code == 0) {
                        vm.article = json.data
                        document.title = vm.article.title

                    }
                })
            } else {
                this.article.title = ""
                this.article.info = ""
                this.article.keywords = []
            }

        }
    }
}
</script>
<style scoped>
.hr {
    border: 1px solid #ddd;
}

.infomation>img {
    width: 100%;
}

.link {
    text-decoration: underline;
}

.article_info {
    box-sizing: border-box;
    line-height: 22px;
    margin: 15px;
    padding: 0px;
    line-height: 21px;
    font-size: 14px;
}
</style>
